<section class="column">
  <app-view-header>
    <i class="fa fa-list-alt" aria-hidden="true"></i>
    <div *ngIf="playlist.isNew()">New playlist</div>
    <div *ngIf="!playlist.isNew()">Edit playlist</div>
    <div class="button-group actions">
      <button
        (click)="cancel()"
        class="btn btn-danger">
        <i class="fa fa-times" aria-hidden="true"></i>
        Cancel
      </button>
      <button
        class="btn btn-primary"
        [disabled]="!playlistForm.form.valid"
        (click)="save()">
        <i class="fa fa-check" aria-hidden="true"></i>
        Save
      </button>
    </div>
  </app-view-header>

  <div class="card">
    <form #playlistForm="ngForm"
          class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">Name*</label>
        <div class="col-sm-10">
          <input type="text"
                 name="playlistName"
                 class="form-control"
                 placeholder="Name of your playlist"
                 [(ngModel)]="playlist.title"
                 required
                 appFocusInput>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Description</label>
        <div class="col-sm-10">
          <textarea class="form-control"
                    name="playlistDescription"
                    placeholder="Type a few words that describe the mood of your playlist"
                    [(ngModel)]="playlist.description"
                    rows="5"></textarea>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Is Public?</label>
        <div class="col-sm-10">
          <app-toggle-switch [(value)]="playlist.isPublic"
                             enabledIcon="fa fa-globe"
                             disabledIcon="fa fa-lock">
          </app-toggle-switch>
        </div>
      </div>
      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-10"><p>* required inputs</p></div>
      </div>
    </form>
  </div>
</section>
